<template>
        <div class="zh-class-mage">
            <nav-header>
                <template slot="menuBefore">
                    <li>
                    <router-link to="/user/org/organization">组织架构管理</router-link>
                    </li>
                    <li class="gap">&gt;</li>
                    <li v-text="schName" @click="back" style="cursor: pointer;"></li>
                    <li class="gap">&gt;</li>
                </template>
                    <li v-text="gradeName"></li>
            </nav-header>
            <div class="zh-table">
            <div class="zh-table-open clear">
                <div class="zh-open-right fr">
                <el-button type="primary" @click="getOrgData">刷新</el-button>

                </div>
            </div>
                <div class="zh-tree-contents "
                    v-loading="loading.status"
                    :element-loading-text="loading.txt"
                >
                <div class="frame-manage">
                        <ul class="frame-list">
                    <li><div class="ellips">序号</div></li>
                    <li><div class="ellips">班别</div></li>
                    <li><div class="ellips">操作</div></li>
                </ul>
                    <el-tree :data="orgData" :props="defaultProps" node-key="id" default-expand-all >
                    <div class="custom-tree-node" slot-scope="{ node, data }">
                        <ul class="frame-list">
                        <li><div class="ellips">{{ orgData[0].inx++ }}</div></li>
                        <li>
                                <div class="ellips">
                                <span v-show="node.level >= 2" class="gap"></span>
                                <span v-show="node.level >= 3" class="gap"></span>
                                <img v-if="node.level === 1" src="/static/image/user/class3.png"> 
                                <img v-else-if="node.level === 2" src="/static/image/user/class4.png"> 
                                <span v-html="data.name"></span>
                                </div>
                            </li>
                        <li>
                            <div class="ellips">
                                <el-button type="text" size="mini" v-if="node.level === 1" @click.stop="addClassTrigger(data)" >添加班级</el-button>
                                <el-button type="text" size="mini" v-if="node.level === 2" @click.stop="toLink(data)" >成员列表</el-button>
                                <el-button type="text" size="mini" class="delete-button" v-if="node.level === 2" @click.stop="delClassTips(data)" >删除</el-button>
                            </div>
                        </li>
                        </ul>
                    </div>
                    </el-tree>
                    </div>
                </div>
            </div>
        <!-- 添加班级begin -->
        <el-dialog
            title="添加班级"
            :visible.sync="addClassFlag"
            :close-on-click-modal="false" 
            :close-on-press-escape="false"
            :before-close="addClasscancel"
            width="40%"
        >
        <el-form ref="classForm" :model="classForm" label-width="120px" @submit.native.prevent>
        <el-form-item label="选择班级" prop="name" :rules="[{required: true,message: '请选择要添加的班级'}]">
            <el-select v-model="classForm.name" filterable placeholder="请选择添加的班级" >
                <el-option v-for="(cls,classInx) in classList" :key="classInx" :label="cls" :value="cls"></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="选择班主任" prop="base_id" :rules="[{required: true,message: '请选择班主任'}]">
            <el-select v-model="classForm.base_id" filterable placeholder="请选择班主任" >
                <el-option v-for="(teach,teachInx) in teachList" :key="teachInx" :label="teach.name" :value="teach.id"></el-option>
            </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addClassTips()">取 消</el-button>
            <el-button type="primary" @click="addClassTips(1)">确 定</el-button>
        </span>
        </el-dialog>
        <!-- 添加班级end -->
        </div>
</template>
<script>
    export default {
        data() {
            return {
                gradeName: '',
                schName: this.$route.query.name,
                loading: {
                    status: false,
                    txt: "获取数据..."
                },
                defaultProps: {
                    label: "name"
                },
                orgData: [],
                orgParam: {
                    //获取组织架构参数
                    school_id: this.$route.query.gradeId,
                    id: this.$route.query.id
                },
                classList: [],/*存放未创建班级列表 */
                addClassFlag: false,/*弹窗控制 */
                classForm: {
                id: '',/*创建的班级id */
                school_id: this.$route.query.gradeId,/*学校id */
                org_id: this.$route.query.pid,/*学段id */
                pid: this.$route.query.id,/*年级id */
                name: '',/*创建的班级名称 */
                base_id: '',/*班主任id */
                level: 4,
                remark: '',/*备注 */
                status: 1,/*是否启用 */
                },
                teachList: [],/*存放教师列表 */
            }
        },
        created() {
            this.getOrgData();
        },
        methods: {
            getOrgData() {
                this.loading.status = true;
                // 重写成功回调
                let success = data => {
                    this.loading.status = false;
                    this.orgData = data.data;
                    if (this.orgData.length > 0) {
                    this.orgData[0].inx = 1;
                    }
                    this.gradeName = this.orgData[0].name;
                    this.$forceUpdate(); //强制渲染
                };

                let fail = data => {
                    this.loading.status = false;
                    this.$message.error(data.msg);
                };
                this.$ajax.get("api/org/get_tree_by_grade_school", {
                    params: this.orgParam,
                    func: { success: success, fail: fail }
                });
            },
            back() {
                this.$router.go(-1)
            },
            getClassList() {
            let params = {
                id: this.$route.query.id,
                school_id: this.$route.query.gradeId,
            }
            const success=res=>{
                this.classList = res.data;
            }
            this.$ajax.get("api/org/get_name_by_school_grade", {
                    params: params,
                    func: { success: success}
                });
            },
            getTeachList() {
            let params = {
                // org_id: this.$route.query.pid,
                role_id: 6,     
                is_diffplat: 1,       
                school_id: this.$route.query.gradeId,
            }
            const success=res=>{
                this.teachList = res.data;
            }
            this.$ajax.get("api/user/user", {
                    params: params,
                    func: { success: success}
                });
            },
            addClassTrigger(data) {
                this.getClassList();
                this.getTeachList();
                if (this.$refs.classForm) {
                    this.$refs.classForm.clearValidate();
                }
                this.addClassFlag = true;
            },
            addClass() {
            let params = this.classForm;
            const success = res => {
                this.$refs.classForm.clearValidate();
                this.classForm.name = '';
                this.classForm.base_id = '';
                this.addClassFlag = false;
                this.getOrgData();
            }
            this.$ajax.post('api/org/org',params,{func:{success:success}})
            },
            addClassTips(flag) {
                if(flag) {
                    this.$refs[`classForm`].validate(valid => {
                    if (valid) {
                        this.addClass();
                    } else {
                        return;
                    }
                    })
                } else {
                    this.$refs.classForm.clearValidate();
                    this.classForm.name = '';
                    this.classForm.base_id = '';
                    this.addClassFlag = false;
                }
            },
            addClasscancel() {
                 this.$refs.classForm.clearValidate();
                this.classForm.name = '';
                this.classForm.base_id = '';
                this.addClassFlag = false;
            },
            delClass(id) {/*删除班级 */
                let params = {
                    id: id,
                }
                const success=res=>{
                    this.$message.success(res.msg);
                    this.getOrgData();
                }
                this.$ajax.delete('api/org/delete_class',{params:params,func:{success:success}})
            },
            delClassTips(data) {/*删除班级提示 */
                let tipsTxt = `确认删除${data.name}吗？`;
                this.$confirm(tipsTxt, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.delClass(data.id)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            toLink(data) {
            let link =
                "/user/org/memberlist?schName=" + this.schName + "&gradeName=" + this.gradeName + '&className=' + data.name + '&id=' + data.id;
            this.$router.push(link);
            }
        }
    }
</script>
<style lang="scss">
    .zh-class-mage {
        .frame-manage {
        .el-tree {
        height: auto;
        }
        .frame-list {
        display: flex;
        height: 40px;
        line-height: 40px;
        background: #ddd;
        color: #000;
        text-align: center;
        li {
            flex: 1;
            box-sizing: border-box;
            &:nth-of-type(1) {
            flex: 0 0 50px;
            }
            &:nth-of-type(3) {
            flex: 0 0 200px;
            }
        }
        }
        .custom-tree-node {
        width: 100%;
        .frame-list {
            background: none;
            border-bottom: 1px solid #ddd;
            li {
            position: relative;
            border-left: 1px solid #ddd;
            &:last-child {
                border-right: 1px solid #ddd;
            }
            }
            img {
            display: inline-block;
            vertical-align: middle;
            }
        }
        }
        .el-tree-node__content {
            padding-left: 0 !important; 
            height: auto;
        }
        .el-tree-node__content {
        li:nth-of-type(2) .ellips {
            text-align: left;
            padding-left: 30%;
            .gap {
            display: inline-block;
            width: 18px;
            }
        }
        }
    }
}
</style>


